<template>
    <div class="container">
        <el-form
            ref="ruleForm"
            :model="ruleForm"
            :rules="rules"
            label-width="120px"
            class="demo-ruleForm container-form"
        >
            <el-form-item label="用户名" prop="account">
                <el-input v-model="ruleForm.account"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="ruleForm.password"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">登陆</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { ElMessage } from 'element-plus'
export default {
    components: {
        ElMessage
    },
    data() {
        return {
            ruleForm: {
                account: '',
                password: '',
            },
            rules: {
                account: [
                    {
                        required: true,
                        message: '请输入账号',
                        trigger: 'blur',
                    },
                ],
                password: [{
                    required: true,
                    message: '请输入密码', trigger: 'blur'
                }],
            },
        }
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$axios.get(`/org/login/valid?account=${this.ruleForm.account}&password=${this.ruleForm.password}`).then(res => {
                        if (res.isOk) {
                            ElMessage.success('登录成功')
                            this.$router.push({ path: '/blockDiagramList' })
                        } else {
                            ElMessage.error(res.msg)
                        }
                    })
                } else {
                    ElMessage.error('请输入账号密码')
                    return false
                }
            })
        },
        resetForm(formName) {
            this.$refs[formName].resetFields()
        },
    },
}
</script>

<style>
.container {
    width: 100%;
    height: 100%;
    position: relative;
    top: 30%;
    width: 40%;
    left: 25%;
}
/* .container-form {
    width: 50%;
    height: 30%;
} */
</style>